<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #chart {
        background-color: gray;
      }
    </style>
  </head>
  <body>
    <canvas id="chart" width="800" height="500"></canvas>
    <script>
      // 获取canvas容器
      const chart = document.getElementById('chart');
      // 获取画笔
      const ctx = chart.getContext('2d');

      ctx.beginPath();
      ctx.moveTo(100, 100);
      ctx.lineTo(700, 100);

      ctx.moveTo(100, 160);
      ctx.lineTo(700, 160);

      ctx.moveTo(100, 220);
      ctx.lineTo(700, 220);

      ctx.moveTo(100, 280);
      ctx.lineTo(700, 280);

      ctx.moveTo(100, 340);
      ctx.lineTo(700, 340);

      ctx.strokeStyle = 'rgba(0, 0, 0, 0.3)';
      ctx.stroke();
      ctx.closePath();

      ctx.beginPath();
      // 标题
      ctx.font = '20px 宋体';
      ctx.fillText('柱状图', 50, 50);

      // 轴线
      ctx.moveTo(100, 100);
      ctx.lineTo(100, 400);
      ctx.lineTo(700, 400);

      ctx.font = '12px 宋体';
      ctx.textAlign = 'right';
      // y轴刻度线
      ctx.moveTo(100, 100);
      ctx.lineTo(92, 100);
      ctx.fillText('150', 88, 104);

      ctx.moveTo(100, 160);
      ctx.lineTo(92, 160);
      ctx.fillText('120', 88, 164);

      ctx.moveTo(100, 220);
      ctx.lineTo(92, 220);
      ctx.fillText('90', 88, 224);

      ctx.moveTo(100, 280);
      ctx.lineTo(92, 280);
      ctx.fillText('60', 88, 284);

      ctx.moveTo(100, 340);
      ctx.lineTo(92, 340);
      ctx.fillText('30', 88, 344);

      ctx.moveTo(100, 400);
      ctx.lineTo(92, 400);
      ctx.fillText('0', 88, 404);

      ctx.textAlign = 'center';
      // x轴刻度线
      ctx.moveTo(100, 400);
      ctx.lineTo(100, 408);
      ctx.fillText('食品', 175, 415);

      ctx.moveTo(250, 400);
      ctx.lineTo(250, 408);
      ctx.fillText('数码', 325, 415);

      ctx.moveTo(400, 400);
      ctx.lineTo(400, 408);
      ctx.fillText('服饰', 475, 415);

      ctx.moveTo(550, 400);
      ctx.lineTo(550, 408);
      ctx.fillText('箱包', 625, 415);

      ctx.moveTo(700, 400);
      ctx.lineTo(700, 408);

      // 矩形
      // width：130
      // height：值 / 150 = height / 300
      // height：height = 2 * 值
      // x: 前面点+10
      // y: 400 - height

      ctx.fillStyle = 'pink';
      ctx.fillRect(110, 200, 130, 200);
      ctx.fillRect(260, 160, 130, 240);
      ctx.fillRect(410, 220, 130, 180);
      ctx.fillRect(560, 100, 130, 300);

      ctx.strokeStyle = '#000';
      ctx.stroke();
      ctx.closePath();
    </script>
  </body>
</html>
